<!--
 * @Author: your name
 * @Date: 2021-03-25 14:41:43
 * @LastEditTime: 2021-03-27 18:20:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\danshang-admin\src\views\shop\evaluate\index.vue
-->
<!--
 * @Author: your name
 * @Date: 2021-03-25 14:41:43
 * @LastEditTime: 2021-03-27 11:43:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\danshang-admin\src\views\shop\evaluate\index.vue
-->
<!--  -->
<template>
  <div class="evalute">
    <div class="evaluteContailer">
      <div class="timeTab">
        <h2>时间选择：</h2>
        <span
          v-for="item in timeTab"
          :key="item.key"
          :class="activeIndex === item.key ? 'active' : ''"
          @click="handleTabActive(item.key)"
          >{{ item.title }}</span
        >
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          size="mini"
          style="margin: 0 15px;"
          @change="handleChangeTime"
        />
      </div>
      <div class="timeInput">
        <div>
          <span>评价状态：</span>
          <el-select
            v-model="value"
            clearable
            placeholder="请选择评价状态"
            @change="handleSelectItem"
            @clear="handleEmpty"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <span>商品搜索：</span>
          <el-input
            v-model="shopSearch"
            placeholder="请输入商品名称"
            @input="handleShopSearch"
          />
          <el-button
            icon="el-icon-search"
            style="width: 50px; display: flex; align-items: center; justify-content: center; margin: 0 -20px;"
            @click="handleShopnameSearch"
          />
        </div>
        <div>
          <span>用户名称：</span>
          <el-input
            v-model="userSearch"
            placeholder="请输入用户名称"
            @input="handleUserSearch"
          />
          <el-button
            icon="el-icon-search"
            style="width: 50px; display: flex; align-items: center; justify-content: center; margin: 0 -20px;"
            @click="handleUsernameSearch"
          />
        </div>
      </div>
      <div class="btnDirlog" style="margin: 10px 0;">
        <el-button type="primary" @click="handlesAddEvaluate"
          >添加虚拟评论</el-button
        >
      </div>
      <div
        class="shopTable"
        style="margin: 10px 0; flex: 1;  overflow: hidden;"
      >
        <el-table
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%; height: 100%; overflow: scroll;"
        >
          <el-table-column
            align="center"
            label="ID"
            width="90"
            element-loading-text="请给我点时间！"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="商品信息" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.shopInfor }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="60px" label="用户名称">
            <template slot-scope="{ row }">
              <span>{{ row.username }}</span>
            </template>
          </el-table-column>

          <el-table-column width="90px" align="center" label="商品评分">
            <template slot-scope="scope">
              <span>{{ scope.row.shopScore }}</span>
            </template>
          </el-table-column>

          <el-table-column width="90px" label="服务评分">
            <template slot-scope="scope">
              <span>{{ scope.row.serviceScore }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="评论内容" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.evaluationContent }}</span>
            </template>
          </el-table-column>

          <el-table-column class-name="status-col" label="回复内容" width="200">
            <template slot-scope="scope">
              <div v-for="(val, index) in scope.row.replyContent" :key="index">
                <h2 v-if="val.imgUrl">
                  <img
                    :src="val.imgUrl ? val.imgUrl : ''"
                    alt
                    style="width: 50px; height: 50px;"
                  />
                </h2>
                <span>{{ val.title }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" align="center" label="评价时间">
            <template slot-scope="scope">
              <span>{{
                scope.row.scoreTime | parseTime("{y}-{m}-{d} {h}:{i}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <div style="fontSize: 12px;">
                <span
                  style="margin: 5px; color: #1890ff; cursor: pointer;"
                  @click="handleReply(scope.row)"
                  >回复</span
                >
                <span
                  style="margin: 5px; color: #1890ff; cursor: pointer;"
                  @click="handleDeleteItem(scope.row)"
                  >删除</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageList">
        <span />
        <el-pagination
          :current-page="listQuery.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-dialog
        :title="titlename"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span v-show="titleIsShow === 'delete'">确定要删除吗</span>
        <div
          v-show="titleIsShow === 'reply'"
          style="display: flex; justify-content: space-between; align-items: center;"
        >
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <textarea
            id="1"
            v-model="form.title"
            name="text"
            cols="30"
            rows="10"
            style="width: 190px; height: 148px;"
          />
        </div>
        <div v-show="titleIsShow === 'addEvaluate'" class="addForm">
          <el-form ref="ruleForm" :model="virtualForm" :rules="rules">
            <el-form-item label="评论内容" prop="evaluationContent">
              <el-input
                v-model="virtualForm.evaluationContent"
                placeholder="请输入评论内容"
              />
            </el-form-item>
            <el-form-item label="服务评分" prop="serviceScore">
              <el-input
                v-model="virtualForm.serviceScore"
                placeholder="请输入服务评分"
              />
            </el-form-item>
            <el-form-item label="商品信息" prop="shopInfor">
              <el-input
                v-model="virtualForm.shopInfor"
                placeholder="请输入商品信息"
              />
            </el-form-item>
            <el-form-item label="商品评分" prop="shopScore">
              <el-input
                v-model="virtualForm.shopScore"
                placeholder="请输入商品评分"
              />
            </el-form-item>
            <el-form-item label="用户名称" prop="username">
              <el-input
                v-model="virtualForm.username"
                placeholder="请输入用户名称"
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="dialogimg">
        <img width="100%" :src="form.imgUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { fetchList } from "@/api/evalute";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dialogimg: false, // 图片放大弹框开关
      disabled: false, // 是否禁用
      titlename: "提示",
      titleIsShow: "delete", // 确定按钮控制器
      dialogVisible: false, // 弹框开关
      activeIndex: "all", // 日期筛选数据变动容器
      value1: "", // 日期选择器数据
      virtualForm: {},
      rules: {},
      // 请求数据参数
      listQuery: {
        page: 1,
        limit: 5,
        total: 0
      },
      list: [], // 初始数据容器
      filterData: [], // 初始数据容器
      // 日期筛选数据
      timeTab: [
        {
          title: "全部",
          key: "all"
        },
        {
          title: "今天",
          key: "0"
        },
        {
          title: "昨天",
          key: "1"
        },
        {
          title: "最近7天",
          key: "2"
        },
        {
          title: "最近30天",
          key: "3"
        },
        {
          title: "本月",
          key: "4"
        },
        {
          title: "本年",
          key: "5"
        }
      ],
      value: "", // 状态下拉框value绑定
      // 下拉框数据
      options: [
        {
          value: "选项1",
          label: "已回复",
          isShow: true
        },
        {
          value: "选项2",
          label: "未回复",
          isShow: false
        }
      ],
      shopSearch: "", // 商品搜索数据绑定
      userSearch: "", // 用户搜索数据绑定
      tableItem: {}, // 保存每一项容器
      // 弹框文本框双向数据绑定
      form: {
        title: "", // 上传评论
        imgUrl: "" // 上传图片地址
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList(); // 初始请求数据
  },
  // 方法集合
  methods: {
    // 随机id函数
    createId() {
      const keys = Math.floor(
        Math.random() * (99999999999 - 11111111111 + 1) + 11111111111
      );
      return keys;
    },
    // 随机时间关键字筛选函数
    createTimeSearch() {
      const search = Math.floor(Math.random() * (5 - 0 + 1) + 0);
      return search;
    },
    // 当前时间函数
    createTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const time = `${year}-${month}-${day} ${hour}:${minute}`;
      return time;
    },
    // 初始请求数据
    getList() {
      fetchList(this.listQuery).then(res => {
        if (res.code === 20000) {
          this.list = res.data.items;
          this.filterData = res.data.items;
          this.listQuery.total = res.data.total;
        }
      });
    },
    // 每页显示几条
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    // 页数切换
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.value = "";
      this.getList();
      this.handleTabActive("all");
    },
    // 时间选择
    handleTabActive(key) {
      this.activeIndex = key;
      const data = this.filterData.filter(item => item.timeSearch === key);
      if (key !== "all") {
        this.list = data;
      } else {
        this.getList();
      }
    },
    // 商品信息模糊搜索
    handleShopnameSearch() {
      const data = this.filterData.filter(item =>
        item.shopInfor.includes(this.shopSearch)
      );
      if (this.shopSearch !== "") {
        this.list = data;
      }
    },
    // 商品信息输入框不为空
    handleShopSearch() {
      if (this.shopSearch === "") {
        this.getList();
      }
    },
    // 用户模糊搜索
    handleUsernameSearch() {
      const data = this.filterData.filter(item =>
        item.username.includes(this.userSearch)
      );
      if (this.userSearch !== "") {
        this.list = data;
      }
    },
    // 用户输入框不为空
    handleUserSearch() {
      if (this.userSearch === "") {
        this.getList();
      }
    },
    // 下拉框监听
    handleSelectItem() {
      let data = [];
      this.options.forEach(item => {
        if (item.value === this.value) {
          data = this.filterData.filter(
            val => val.evaluateShow === item.isShow
          );
        }
      });
      this.list = data;
    },
    // 下拉框清空
    handleEmpty() {
      this.getList();
    },
    // 删除
    handleDeleteItem(val) {
      this.dialogVisible = true;
      this.titleIsShow = "delete";
      this.tableItem = val;
      this.titlename = "提示";
    },
    // 回复
    handleReply(val) {
      this.dialogVisible = true;
      this.titleIsShow = "reply";
      this.tableItem = val;
      this.titlename = "回复";
    },
    // 弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 一级弹框确定
    handleConfirm() {
      if (this.titleIsShow === "delete") {
        // 删除确定
        const data = this.list.filter(item => item.id !== this.tableItem.id);
        this.list = data;
        this.dialogVisible = false;
      } else if (this.titleIsShow === "reply") {
        // 回复确定
        const data = JSON.parse(JSON.stringify(this.form));
        this.list.forEach(item => {
          if (item.id === this.tableItem.id) {
            item.replyContent.unshift(data);
            this.dialogVisible = false;
          }
        });
        this.form.title = "";
      } else if (this.titleIsShow === "addEvaluate") {
        // 添加虚拟评论
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const newVirtualForm = JSON.parse(JSON.stringify(this.virtualForm));
            this.list.unshift(newVirtualForm);
            this.virtualForm = {
              evaluateShow: false,
              evaluationContent: "",
              replyContent: [],
              serviceScore: "",
              shopInfor: "",
              shopScore: "",
              timeSearch: "",
              username: ""
            };
            this.dialogVisible = false;
          } else {
            alert("请先填写完整内容");
          }
        });
      }
    },
    // 弹框图片发大
    handlePictureCardPreview(file) {
      this.form.imgUrl = file.url; // 图片赋值路径
      this.dialogimg = true; // 图片弹框开启
    },
    // 图片上传
    handleDownload(file) {
      this.form.imgUrl = file.url; // 图片赋值路径
    },
    // 上传图片删除
    handleRemove(file) {
      console.log(file);
    },
    // 添加虚拟评论
    handlesAddEvaluate() {
      this.titleIsShow = "addEvaluate";
      this.titlename = "添加";
      this.dialogVisible = true;
      this.virtualForm.timeSearch = this.createTimeSearch().toString();
      this.virtualForm.id = this.createId();
      this.virtualForm.scoreTime = this.createTime();
    },
    // 日期筛选
    handleChangeTime() {
      const starttime = this.moment(this.value1).format("YYYY-MM-DD");
      if (this.value1 === null) {
        this.getList();
      } else {
        const data = this.list.filter(
          item => item.scoreTime.slice(0, 10) === starttime
        );
        this.list = data;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.evalute {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 0 30px;
  box-sizing: border-box;
  .evaluteContailer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .timeTab {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      h2 {
        font-size: 14px;
        font-weight: 500;
      }
      span {
        padding: 4px 10px;
        border: solid 1px #ccc;
        font-size: 12px;
        color: #333;
        cursor: pointer;
      }
      span.active {
        border: none;
        background: #1890ff;
        color: #fff;
      }
    }
    .timeInput {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      div {
        width: 400px;
        display: flex;
        align-items: center;
        margin: 0 20px;
        span {
          width: 100px;
          font-size: 12px;
          color: #666;
          font-weight: 600;
        }
      }
      div:nth-child(1) {
        margin: 0 0;
      }
    }
    .pageList {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
